<template>
  <div style="padding-right:144px;" calss="datash  clearfix">
    <page style="padding-right:0" class="dash clearfix">
      <TitleBar title="操作日志" refresh />
      <div class="su_box">
        <p class="fu_data">数据列表</p>
        <el-table
          :data="dataList"
          :header-cell-style="{
          'height':'57px',
          'background':'rgba(249,250,252,1)'
        }"
        >
          <el-table-column label="时间" align="center">
            <template class="scop" slot-scope="scope">
              <span
                prop="operateTime"
                style="display:block;width:100%;text-align:center;"
              >{{ scope.row.operateTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="IP" align="center">
            <template slot-scope="scope">
              <el-popover>
                <div slot="reference" class="name-wrapper">
                  <span style="display:block;width:100%;text-align:center;">{{ scope.row.ip!==null?scope.row.ip:'-' }}</span>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="地区" align="center">
            <template slot-scope="scope">
              <span style="display:block;width:100%;text-align:center;">{{ scope.row.localtion!==null?scope.row.localtion:'-' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="浏览器" align="center">
            <template slot-scope="scope">
              <span style="display:block;width:100%;text-align:center;">{{ scope.row.browser!==null?scope.row.browser:'-' }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </page>
     <pagination :pagination="pagination1" @changepage="init" />
  </div>
</template>
<script>
import { getOperateLog } from "@/api/homeLog.js";
import { constants } from "crypto";
export default {
  data() {
    return {
      pagination1: {},
      pageSize: 10,
      dataList: []
    };
  },
  created() {
    this.init();
  },
  methods: {
    init(pageNum = 1) {
      getOperateLog({
        pageNum,
        pageSize: this.pageSize
      }).then(res => {
        this.pagination1 = res.data
        this.dataList = res.data.list
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.datash {
  height: auto;
  width: 100%;
  .scop{
    height: 70px;
    line-height: 70px;
  }
  .dash {
    .dashboard-text {
      width: 100%;
    }
    .su_box {
      .fu_data {
        padding-left: 27px;
        font-size: 16px;
        font-family: PingFang-SC-Regular;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        height: 57px;
        line-height: 57px;
        background: rgba(243, 243, 243, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 4px 4px 0px 0px;
      }
      .el-table th,
      .el-table tr {
        height: 57px !important;
        background-color: #fff;
      }
      .el-table .cell {
        padding: 0 !important;
      }
    }
  }
}
</style>
